<template>
	<div class="user-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="820" draggable :mask-closable="false">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="抽奖分类" prop="drawCategoryId">
							<Select v-model="form.drawCategoryId">
								<Option v-for="item in classify" :value="item.id">{{item.title}}</Option>
							</Select>
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="最低起扭" prop="drawMoneyLimit">
							<Input v-model="form.drawMoneyLimit" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="商品组名称" prop="drawProductGroupName">
							<Input v-model="form.drawProductGroupName" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="备注" prop="remark">
							<Input v-model="form.remark" />
						</FormItem>
						</Col>
					</Row>
					<!-- <Row> -->
						<FormItem v-for="(item, index) in items" :key="index" :label="'组合 ' + (index + 1)"
						 >
							<Row :gutter="32">
								<Col span="10">
									<Input type="text" v-model="item.drawProductName" placeholder="组合名称"></Input>
								</Col>
								<Col span="10">
									<!-- <FormItem label="头像"> -->
									  <upload-pic-input v-model="item.drawProductPic"></upload-pic-input>
									<!-- </FormItem> -->
								</Col>
								<Col span="4">
								<Button @click="handleRemove(index)">Delete</Button>
								</Col>
							</Row>
						</FormItem>

					<!-- </Row> -->
					<Row>
						<FormItem>
							<Row>
								<Col span="12">
								<Button type="dashed" @click="handleAdd" icon="md-add">Add item</Button>
								</Col>
							</Row>
						</FormItem>
					</Row>
				</Form>
			</div>
			<div class="drawer-footer br">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
	</div>
</template>

<script>
	import {
		getAllGiftClassifyList,
		insertGiftArr,
		updateGiftArr,
		getGiftArrDetail
	} from "@/api/index";
	import {
		validateUsername,
		validateMobile,
		validatePassword,
	} from "@/libs/validate";
	import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
	export default {
		name: "user",
		components: {
			uploadPicInput,
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "1",
			},
		},
		data() {
			return {
				visible: this.value,
				title: "",
				submitLoading: false,
				maxHeight: 510,
				form: {
					drawCategoryId: '',
					drawMoneyLimit: '',
					drawProductGroupName: '',
					drawProductInfos: '',
					remark: '',
					id: ''
				},
				formValidate: {
					// 表单验证规则
					// username: [{
					// 		required: true,
					// 		message: "请输入登录账号",
					// 		trigger: "change"
					// 	},
					// 	{
					// 		validator: validateUsername,
					// 		trigger: "change"
					// 	},
					// ],
					// nickname: [{
					// 	required: true,
					// 	message: "请输入用户名",
					// 	trigger: "change"
					// }, ],
					// mobile: [{
					// 		required: true,
					// 		message: "请输入手机号",
					// 		trigger: "change"
					// 	},
					// 	{
					// 		validator: validateMobile,
					// 		trigger: "change"
					// 	},
					// ],
					// password: [{
					// 		required: true,
					// 		message: "请输入密码",
					// 		trigger: "change"
					// 	},
					// 	{
					// 		validator: validatePassword,
					// 		trigger: "change"
					// 	},
					// ],
					// email: [{
					// 		required: true,
					// 		message: "请输入邮箱地址"
					// 	},
					// 	{
					// 		type: "email",
					// 		message: "邮箱格式不正确"
					// 	},
					// ]
				},
				classify: [],
				items: []
			};
		},
		methods: {
			getClassify() {
				getAllGiftClassifyList().then(res => {
					if (res.status === 200) {
						this.classify = res.result;
					} else {
						this.classify = [];
					}
				})
			},
			handleAdd() {
				this.items.push({
					drawProductPic: '',
					drawProductName: ''
				});
			},
			handleRemove(index) {
				this.items.splice(index, 1)
			},
			submit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.type == "1") {
							// 编辑
							this.form.drawProductInfos = JSON.stringify(this.items);
							this.submitLoading = true;
							console.log('编辑', this.form)
							updateGiftArr(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						} else {
							// 添加
							this.form.drawProductInfos = JSON.stringify(this.items);
							this.submitLoading = true;
							insertGiftArr(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			setCurrentValue(value) {
				if (value === this.visible) {
					return;
				}
				if (this.type == "1") {
					this.title = "编辑抽奖组合";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else if (this.type == "2") {
					this.title = "添加抽奖组合";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				}
				// 清空数据
				this.$refs.form.resetFields();
				if (this.type == "1") {
					getGiftArrDetail({id: this.data.drawProductGroupId}).then(res => {
						if (res.status === 200) {
							// 回显
							this.form.drawCategoryId = res.result.drawCategoryId;
							this.form.drawMoneyLimit = res.result.drawMoneyLimit === null ? '' : res.result.drawMoneyLimit;
							this.form.drawProductGroupName = res.result.drawProductGroupName === null ? '' : res.result.drawProductGroupName;
							this.form.remark = res.result.remark === null ? '' : res.result.remark;
							this.form.id = res.result.id;
							this.items = res.result.drawProductVos.filter(n => n);
						}
					})
				} else {
					// 添加
					this.items = [];
					this.form = {
						drawCategoryId: '',
						drawMoneyLimit: '',
						drawProductGroupName: '',
						drawProductInfos: '',
						remark: ''
					};
				}
				this.getClassify();
				this.visible = value;
			},
		},
		watch: {
			value(val) {
				this.setCurrentValue(val);
			},
			visible(value) {
				this.$emit("input", value);
			},
		},
		// mounted() {
		// 	this.init();
		// },
	};
</script>

<style lang="less">
	@import "../../../styles/drawer-common.less";
</style>
